import React from 'react'

import "swiper/dist/css/swiper.min.css"
import Swiper from "swiper/dist/js/swiper.min.js"
import "./_longTeamExpert.less"

import teacher1 from '../images/teacher1.png'
import teacher2 from '../images/teacher2.png'
import teacher3 from '../images/teacher3.png'
import teacher4 from '../images/teacher4.png'


export default class extends React.PureComponent {
  state = {
    swiper: null,
    swiperId: null,
    data: [
      { active: true, name: 'ANTHONY ROBIN', country: 'LONDON', desc: '儿童文学专家', img: teacher1, to: '/index/course' },
      { active: '', name: 'DONNA ARIA', country: 'NEW YORK', desc: '20年+小学英语教育', img: teacher2, to: '/index/course' },
      { active: '', name: 'MICHEIL.D', country: 'BOSTON', desc: '20年+ 儿童教育', img: teacher3, to: '/index/course' },
      { active: '', name: 'THERESA. P', country: 'LONDON', desc: '儿童文学作家', img: teacher4, to: '/index/course' },
    ]
  }

  componentDidMount() {
    this.swiper = new Swiper(this.swiperId, {
      speed: 300,
      spaceBetween: 80,
      // autoplay: {
      //   delay: 5000
      // },
      autoplay: false,
      centeredSlides: true,
      loop: true,
      effect: 'coverflow',
      grabCursor: true,
      slidesPerView: 3,
      coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 100,
        modifier: 0,
        slideShadows : true,
      },
      pagination: {
        el: this.paginationEl,
      },
      navigation: {
        nextEl: this.nextEl,
        prevEl: this.prevEl,
      }
    });
  }

  render() {
    return (
      <div className="long-team-expert-pad">
        <h2>专家与教学团队</h2>
        {/* <div className="team-of-experts-comp3-mask"></div> */}
        <div className="team-of-experts-comp3" ref={self => this.swiperId = self}>
          <div className=" swiper-wrapper">
            {
              this.state.data.map((item, i) => (
                <div className='swiper-slide' key={i}>
                  <div className="img"><img src={item.img}/></div>
                  <p className="name">{item.name}</p>
                  <p className="country">{item.country}</p>
                  <div className="desc">{item.desc}</div>
                </div>
              ))
            }
          </div>
          <div className="swiper-pagination" ref={self => this.paginationEl = self}></div>
        </div>
        <div className="swiper-button-prev" ref={self => this.prevEl = self}></div>
        <div className="swiper-button-next" ref={self => this.nextEl = self}></div>
      </div>
    );
  }
}
